<template>
        <n-grid :x-gap="15" :cols="22" style="height: 100%; width: 120%">
            <n-grid-item :span="3" style="background: rgb(245, 246, 249);">
                <div style="height: 100%;">
                    <n-list hoverable clickable :show-divider="false" style="width: 90%; padding-top: 15px; background: rgb(245, 246, 249);" ml-10>
                        <n-list-item v-for="manage in manages" :key="manage.index"
                                     style="font-size: 13px; height: 35px;"
                                     :class="manage.index === manageChoose ? 'n-list-item-selected' : 'n-list-item-not-selected'"
                                     @click="chooseManage(manage)">
                            <div style="display: flex; flex-direction: row; align-items: center;">
                                {{ manage.name }} <!-- 显示 role.name -->
                            </div>
                        </n-list-item>
                    </n-list>
                </div>
            </n-grid-item>
            <n-grid-item :span="4" style="height: 100%;">
                <div style="background-color: #ffffff; height: 100%;">
                    <div style="display: flex; flex-direction: row; align-items: center; margin-left: 20px; padding-top: 10px;">
                        <label style="font-size: 20px; font-weight: bold;">全局</label>
                        <n-icon ml-15 cursor-pointer size="17" @click="">
                            <icon-ant-design:reload-outlined/>
                        </n-icon>
                        <n-icon color-primary ml-65 cursor-pointer size="17" @click="">
                            <icon-ant-design:plus-outlined/>
                        </n-icon>
                    </div>
                    <n-divider style="margin-top: 10px; margin-bottom: 15px;"/>
                    <n-list hoverable clickable :show-divider="false" style="width: 90%;" ml-10>
                        <n-list-item
                                     style="font-size: 13px; height: 35px;"
                                     class="n-list-item-selected"
                                     @click="chooseRole(role)">
                            <div style="display: flex; flex-direction: row; align-items: center;">
                                通用 <!-- 显示 role.name -->
                            </div>
                        </n-list-item>
                    </n-list>
                </div>
            </n-grid-item>
            <n-grid-item :span="14" mr-20>
                <div class="header-title">通用</div>
                <div class="card-config">
                    <div class="card-config-left">
                        <div class="title">数据权限管理</div>
                        <div class="sub-title">启用角色管理页面【数据权限】功能</div>
                    </div>
                    <div class="card-config-middle">
                        <span class="card-config-middle-text">关闭</span>
                    </div>
                    <div class="card-config-right">
                        <n-button size="small">编辑</n-button>
                    </div>
                </div>
                <div class="card-config">
                    <div class="card-config-left">
                        <div class="title">周起始日</div>
                        <div class="sub-title">影响销量统计、销量分析、产品表现、运营日志页面</div>
                    </div>
                    <div class="card-config-middle">
                        <n-radio-group value="monday" name="radiogroup" size="small">
                            <n-flex vertical>
                                <n-radio value="monday">
                                    <span style="font-size: 12px;">周一</span>
                                </n-radio>
                                <n-radio value="sunday">
                                    <span style="font-size: 12px;">周天</span>
                                </n-radio>
                            </n-flex>
                        </n-radio-group>
                    </div>
                    <div class="card-config-right">
                        <n-button size="small">编辑</n-button>
                    </div>
                </div>
                <div class="header-title">部门管理</div>
                <div class="card-config">
                    <div class="card-config-left">
                        <div class="title">部门店铺管理模式</div>
                    </div>
                    <div class="card-config-middle">
                        <n-radio-group value="share" name="radiogroup" size="small">
                            <n-flex vertical>
                                <n-radio value="distribute">
                                    <span style="font-size: 12px;">分配</span>
                                    <span style="color: #a6abb4; font-size: 12px;" ml-8>默认只有主管拥有查看权限，主管向下游分配权限</span>
                                </n-radio>
                                <n-radio value="share">
                                    <span style="font-size: 12px;">共享</span>
                                    <span style="color: #a6abb4; font-size: 12px;" ml-8>该部门下所有用户均能查看对应数据</span>
                                </n-radio>
                            </n-flex>
                        </n-radio-group>
                    </div>
                    <div class="card-config-right">
                        <n-button size="small">编辑</n-button>
                    </div>
                </div>
                <div class="card-config">
                    <div class="card-config-left">
                        <div class="title">数据权限向上级主管共享</div>
                        <div class="sub-title">上级主管将拥有下属员工的Listing、SKU及单据数据</div>
                    </div>
                    <div class="card-config-middle">
                        <span class="card-config-middle-text">关闭</span>
                    </div>
                    <div class="card-config-right">
                        <n-button size="small">编辑</n-button>
                    </div>
                </div>
            </n-grid-item>
        </n-grid>
</template>
<script setup>
import {onMounted, reactive, ref} from 'vue'
import api from '@/api/admin';
import {useUserStore} from '@/store';
import {useRouter} from 'vue-router';
import {NButton} from 'naive-ui'
import AccountActions from "@/views/admin/system/account-manage/components/account-actions.vue";
const manages = [
	{
		index: 1,
    name: '全局'
  },
	{
		index: 2,
		name: '审批'
	},
	{
		index: 3,
		name: '产品'
	},
	{
		index: 4,
		name: '销售'
	},
	{
		index: 5,
		name: '采购'
	},
	{
		index: 6,
		name: '物流'
	},
	{
		index: 7,
		name: '财务'
	},
	{
		index: 8,
		name: '仓库'
	},
	{
		index: 9,
		name: '客服'
	},
]
const showForm = ref(false);
const roles = ref([])
const chooseRole = (role) => {
	searchCondition.value.name = "";
	searchCondition.value.role = role.authority;
	searchByCondition()
}
const chooseManage = (manage) => {
	manageChoose.value = manage.index
}
const handleClose = () => {
	showForm.value = false;
};
const userStore = useUserStore()
const router = useRouter()
const loading = ref(true)
const roleList = ref([])
const range = ref(null)
const value = ref("全部")
const checkedRowKeysRef = ref([]);
const option = ref([
])
const manageChoose = ref(1)
const searchCondition = ref({
	name: "",
	role: "SUPERADMIN"
});
const admins = ref([])
admins.value.push({
	label:'全部',
	value:-1,
})
const columns = [
	{
		type: 'selection'
	},
	{
		key: 'username',
		title: '用户名',
		width: 70,
	},

	{
		key: 'name',
		title: '真实姓名',
		width: 50,

	},
	{
		key: 'phone',
		title: '手机号',
		width: 90,
	},
	{
		key: 'operation',
		title: '操作',
		width: 40,
		render(row) {
			return h(
				AccountActions,
				{
					onClickEdit: () => onEditProductCategory(row),
					onClickDelete: () => onDeleteProductCategory(row),

				}
			);
		}
	},
]
let total = 0
const paginationReactive = reactive({
	page: 1,
	pageSize: 10,
	showSizePicker: true,
	pageSizes: [5, 10, 20],
	itemCount:0,
	prefix: () => {
		return '查询出 ' + total + '条记录';
	},
	onChange: (page) => {
		paginationReactive.page = page;
		queryByPage()
	},
	onUpdatePageSize: (pageSize) => {
		paginationReactive.pageSize = pageSize;
		paginationReactive.page = 1;
		queryByPage()
	}
});
const handleCheck = (rowKeys) => {
	checkedRowKeysRef.value = rowKeys;
}
const deleteSelectProduct = () => {
	if(checkedRowKeysRef.value.length <= 0) {
		$message.error("当前并未选择管理员！")
		return
	}
	$dialog.confirm({
		title: '警告',
		content: '您确定删除当前所选管理员？',
		positiveText: '确定',
		negativeText: '取消',
		onPositiveClick: async () => {
			const ids = checkedRowKeysRef.value.join(",")
			loading.value = true
			try {
				const res = await api.deleteProductCategories({params:{ids}})
				if(res.code === 200) {
					$message.success("删除所选管理员成功！")
					await searchByCondition()
				}
				else {
					$message.error(res.message)
				}
			} catch (err) {
				$message.error("删除所选管理员失败！")
			}finally{
				loading.value = false
			}
		},
	})
}
const searchByCondition = async () => {
	loading.value = true
	try {
		paginationReactive.page = 1;
		const res = await api.findPageAdmin({
			params: {
				...searchCondition.value,
				pageNum: paginationReactive.page,
				pageSize: paginationReactive.pageSize,
			}
		})
		if(res.code === 200) {
			total = res.data.total
			paginationReactive.itemCount = total
			const baseCount = (paginationReactive.page - 1)*paginationReactive.pageSize
			roleList.value = res.data.records.map((item,i)=>{
				return {...item,
					colId: baseCount + i + 1,
				}
			})
		}
		else {
			$message.error(res.message)
		}
	} catch (err) {
		$message.error("查询管理员失败！")
	}finally{
		loading.value = false
	}
}
const exportListInfo = async () => {
	const res = await api.exportProductCategoryList({
		adminId: searchCondition.value.adminId
	})
	const contentDisposition = res.headers["content-disposition"]
	// console.log(res)
	let original_fileName = ""
	if(contentDisposition) {
		const uri = res.headers["content-disposition"].split("=")[1]
		original_fileName = window.decodeURI(uri)
	}
	const blob = new Blob([res.data], {type: "application/vnd.ms-excel"});
	if(window.navigator && window.navigator.msSaveOrOpenBlob) {
		window.navigator.msSaveOrOpenBlob(blob, original_fileName);
	} else{
		const fileName = original_fileName;
		const elink = document.createElement('a')
		document.body.appendChild(elink)
		elink.download= fileName;
		elink.style.display ="none"
		elink.href  = window.URL.createObjectURL(blob)
		elink.click()
		window.URL.revokeObjectURL(elink.href)
		document.body.removeChild(elink)
	}
}
const onDeleteProductCategory = async (role) => {
	$dialog.confirm({
		title: '警告',
		content: '您确定删除当前管理员？',
		positiveText: '确定',
		negativeText: '取消',
		onPositiveClick: async () => {
			const {id} = role
			loading.value = true
			try {
				const res = await api.deleteProductCategory({id})
				if(res.code === 200) {
					$message.success("删除管理员成功！")
					await queryByPage()
				}
				else {
					$message.error(res.message)
				}
			} catch (err) {
				$message.error("删除管理员失败！")
			}finally{
				loading.value = false
			}
		}
	})
}
const onEditProductCategory = async (role) => {
	const {id} = role
	await router.push({name: 'AdminLogDetail', params: {roleId: id}});
}
const queryByPage = async () => {
	loading.value = true
	try {
		const res = await api.findPageAdmin(
			{
				params:{
					role: searchCondition.value.role,
					pageNum:paginationReactive.page,
					pageSize:paginationReactive.pageSize,
				}
			})
		if(res.code === 200) {
			total = res.data.total
			paginationReactive.itemCount = total
			const baseCount = (paginationReactive.page - 1)*paginationReactive.pageSize
			roleList.value = res.data.records.map((item,i)=>{
				return {...item,
					colId: baseCount + i + 1,
				}
			})
		}
		else {
			$message.error(res.message)
		}
	} catch (err) {
		$message.error("获取管理员失败！")
	}finally{
		loading.value = false
	}
}
const queryRoleList = async () => {
	loading.value = true
	try {
		const res = await api.findAllRole()
		if(res.code === 200) {
			roles.value = res.data
		}
		else {
			$message.error(res.message)
		}
	} catch (err) {
		$message.error("获取角色信息失败！")
	}finally{
		loading.value = false
	}
}
const rowKey = (rowData) => {
	return rowData.id
}
onMounted(()=>{
	queryRoleList()
	queryByPage()
})
</script>
<style scoped>
:deep(.n-data-table-th__title),
:deep(.n-data-table-td) {
    text-align: center;

}
:deep(.n-select) {
    width: 120px !important;
}

:deep(.two-line-description) {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* 控制显示的行数 */
    overflow: hidden;
}
:deep(.n-tabs-tab) {
    background-color: #ffffff88 !important;
}
:deep(.n-tabs-tab--active) {
    font-weight: bold !important;
    background-color: #ffffff !important;
}
:deep(.n-tabs-pane-wrapper) {
    background-color: #ffffff !important;
    margin-top: -2px !important;
}
:deep(.n-data-table-th__title) {
    font-weight: bold !important;
    font-size: 13px !important;
}
:deep(.n-list-item-not-selected:hover) {
    background-color: #005BF50A !important;
}
:deep(.n-list-item-selected) {
    background-color: #005BF519 !important;
    color: #005bf5;
}
:deep(.n-list-item-selected:hover) {
    background-color: #005BF519 !important;
    color: #005bf5;
}
.header-title {
    margin: 10px 16px 0px 16px;
    font-weight: 700;
    color: rgb(11, 16, 25);
    font-size: 12px;
}
.card-config {
    margin: 4px 12px 8px;
    padding: 20px;
    display: flex;
    background: rgb(255, 255, 255);
    border: 1px solid rgb(230, 232, 235);
    border-radius: 4px;
    line-height: 22px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: row;
    color: rgb(11, 16, 25);
    font-size: 14px;
    min-width: max-content;
}
.card-config-left {
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    color: rgb(11, 16, 25);
    font-size: 14px;
    width: 200px;
    min-width: 200px;
}
.card-config-middle {
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    margin-left: 28px;
    -webkit-box-flex: 1;
    flex: 1 1 0%;
}
.card-config-middle-text {
    font-weight: 700;
    font-size: 14px;
    line-height: 22px;
}
.card-config-right {
    margin-left: 20px;
    display: inline-flex;
}
.title {
    line-height: 22px;
}
.sub-title {
    font-size: 12px;
    line-height: 18px;
    color: #a6abb4;
}
</style>
